<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">会员详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <template v-if="detailData.dataType !== '5'">
                    <el-col class="mr20 width100" v-if="detailData.status == '1'">
                        <el-button
                            class="btn-default width100"
                            type="primary"
                            @click="audit()"
                            v-hasPermi="['system:memberInformation:audit']"
                        >审核</el-button>
                    </el-col>
                    <el-col class="mr20 width100" v-if="detailData.status == '2'">
                        <el-button
                            class="btn-audit width100"
                            type="primary"
                            @click="theAudit()"
                            v-hasPermi="['system:memberInformation:audit']"
                        >反审核</el-button>
                    </el-col>
                    <el-col class="mr20 width100" v-if="detailData.status == '0' || detailData.status == '3'">
                        <el-button
                            class="btn-default width100"
                            type="primary"
                            @click="edit()"
                            v-hasPermi="['system:memberInformation:update']"
                        >编辑</el-button>
                    </el-col>
                </template>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : detailData.status == '0'}">草稿</span>
                        <span :class="{ 'active' : detailData.status == '1'}">待审核</span>
                        <span :class="{ 'active' : detailData.status == '2'}">已审核</span>
                        <span :class="{ 'active' : detailData.status == '3'}">拒绝</span>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>手机号：</span>{{ detailData.phone ?  detailData.phone : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>昵称：</span>{{ detailData.nickName ? detailData.nickName : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>性别：</span>{{ detailData.sex ?  detailData.sex : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>身份证号：</span>{{ detailData.identityNumber ?  detailData.identityNumber : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>出生日期：</span>{{ detailData.dateOfBirth ?  detailData.dateOfBirth : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>姓名：</span>{{ detailData.name ?  detailData.name : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>邮箱：</span>{{ detailData.email ?  detailData.email : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>民族：</span>{{ detailData.ethnic ? detailData.ethnic : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>学历：</span>{{ detailData.education ?  detailData.education : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>微信：</span>{{ detailData.wechat ? detailData.wechat : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>销售区域：</span>{{ detailData.areaName ?  detailData.areaName : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>客户分类：</span>{{ detailData.sortName ? detailData.sortName : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="24">
                            <span>默认收货地址：</span>
                            <template v-if="memberAddressList">
                                {{ memberAddressList.province !== null ? memberAddressList.province : '' }}{{ memberAddressList.city !== null ? memberAddressList.city : '' }}{{ memberAddressList.area !== null ? memberAddressList.area : '' }}{{ memberAddressList.address !== null ? memberAddressList.address : '' }}
                            </template>
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>最后登录时间：</span>{{ detailData.lastLoginTime ?  detailData.lastLoginTime : '暂无'}}
                        </el-col>
                        <el-col :span="12">
                            <span>备注：</span>{{ detailData.remarks ? detailData.remarks : '暂无'}}
                        </el-col>
                    </el-row>
                    <el-row class="detail-item">
                        <el-col :span="12">
                            <span>状态：</span>
                            <font v-if="detailData.status == 0" style="color:#13C2C2">草稿</font>
                            <font v-if="detailData.status == 1" style="color:#13C2C2">待审核</font>
                            <font v-if="detailData.status == 2" style="color:#52C41A">已审核</font>
                            <font v-if="detailData.status == 3" style="color:#fd562c">拒绝</font>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <el-row class="detail-item">
                        <div class="avatar-uploader">
                            <img v-if="detailData.imageUrl" :src="detailData.imageUrl" class="avatar">
                            <p v-else>暂无</p>
                        </div>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <!-- 审核 -->
        <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
            <el-row>
                <el-col :span="24">
                    <textarea
                        class="approve-textarea"
                        v-model="detailData.remark"
                        type="textarea"
                        placeholder="请输入意见和看法"
                    />
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="btn-success mr20 width100"
                    @click="agreeApprove()"
                >同意</el-button>
                <el-button
                    type="primary"
                    class="btn-cancel width100"
                    @click="disagreeApprove()"
                >拒绝</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { memberDetail, memberAudit } from "@/api/system/member/member"
export default {
    name: "detail",
    data() {
        return {
            id: '',
            detailData: '',
            open: false,
            memberAddressList: {}
        }
    },
    created(){
        this.id = this.$route.query.id
        this.getDetailData()
    },
    methods: {
        // 获取详情数据
        getDetailData(){
            memberDetail(this.id).then(res => {
                this.detailData = res.data
                if(res.data.memberAddressList.length > 0){
                    this.memberAddressList = res.data.memberAddressList[0]
                }
            })
        },
        // 审核
        audit(){
            this.open = true
        },
        // 通过
        agreeApprove(){
            let data = this.detailData
            data.status = '2'
            memberAudit(this.detailData).then(res => {
                if(res.code == 200){
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                    // this.$tab.refreshPage()
                    this.$tab.closeOpenPage({ path: "/customer/member/list" })
                }
            })
        },
        // 拒绝
        disagreeApprove(){
            let data = this.detailData
            data.status = '3'
            memberAudit(data).then(res => {
                if(res.code == 200){
                    this.open = false
                    this.$modal.msgSuccess("操作成功")
                    // this.$tab.refreshPage()
                    this.$tab.closeOpenPage({ path: "/customer/member/list" })
                }
            })
        },
        // 反审核
        theAudit(){
            this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
                let data = this.detailData
                data.status = '0'
                memberAudit(data).then(res => {
                    if(res.code == 200){
                        this.open = false
                        this.$modal.msgSuccess("操作成功")
                        // this.$tab.refreshPage()
                        this.$tab.closeOpenPage({ path: "/customer/member/list" })
                    }
                })
            }).catch(() => {})
        },
        // 编辑
        edit(){
            this.$tab.closeOpenPage({ path: "/customer/member/edit", query:{id: this.id} })
        }
    }
}
</script>

<style scoped>
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  color:#606266;
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 150px;
  display: block;
}
</style>